<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    列表渲染，v-for 指令的使用
      
      语法：
        v-for="item in xxx"
          - xxx 是一个状态数据
          - item 是循环该 状态数据 时的每一项的内容

        v-for="(item, index) in xxx"
          - xxx 是一个状态数据
          - item 是循环该 状态数据 时的每一项的内容
          - index 是循环时的 下标

        v-for="item in object"
          - object 是一个状态数据，是一个对象类型的数据
          - item 是对象的 value 值

        v-for="(value, key, index) in object"
          - object 是一个状态数据，是一个对象类型的数据
          - value 是对象的 value 值
          - key 是对象的 key 值
          - index 循环的下标
    
   -->

    <div id="app">
      <!-- 基础 -->
      <ul>
        <li v-for="item in fruits">{{ item }}</li>
      </ul>

      <hr />
      <!-- 带有 index -->
      <ul>
        <li v-for="(item, index) in fruits">{{ item }} - {{ index }}</li>
      </ul>

      <hr />
      <!-- 循环 对象 -->
      <ul>
        <li v-for="item in userInfo">{{ item }}</li>
      </ul>

      <hr />
      <!-- 循环 对象，带有 key 与 index -->
      <ul>
        <li v-for="(value, key, index) in userInfo">
          {{ value }} - {{ key }} - {{ index }}
        </li>
      </ul>

      <hr />
      <ul>
        <li v-for="item in films">
          <span>电影名：{{ item.name }}</span>
          <span>导演：{{ item.daoyan }}</span>
        </li>
      </ul>

      <hr />
      <!-- 双层循环 -->
      <template v-for="item in students">
        <div>{{ item.label }}</div>
        <ul>
          <li v-for="xxx in item.list">{{ xxx }}</li>
        </ul>
      </template>

      <hr />
      <button @click="transform">转换</button>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            fruits: ["Apple", "Banana", "Orange"], // 水果集合
            userInfo: {
              username: "张三",
              age: 18,
              sex: "男",
            },
            films: [
              { name: "八角笼中", daoyan: "王宝强" },
              { name: "碟中谍", daoyan: "不知道" },
            ],
            students: [
              {
                label: "男",
                list: ["张三", "里斯"],
              },
              {
                label: "女",
                list: ["王五", "马六"],
              },
            ],

            // 后端返回的扁平化的数据格式
            rawStudents: [
              { name: "张三", label: "男" },
              { name: "王五", label: "女" },
              { name: "里斯", label: "男" },
              { name: "马六", label: "女" },
            ],
          };
        },

        methods: {
          transform() {
            // 将 this.rawStudents 转换成我们需要的格式

            // 1. 定义一个最终结果结合
            let result = [];

            // 2. 循环源数据
            this.rawStudents.forEach((item) => {
              // 2.1 获取当前 item 的 label
              const { label, name } = item;

              // 2.2 判断 label 是否已经在 result 结果集合中存在了
              const index = result.findIndex((aaa) => {
                return aaa.label === label;
              });
              if (index > -1) {
                // 查找到了
                result[index].list.push(name);
              } else {
                // 没有找到，就默认构建出一个 对象，追加进 result
                result.push({
                  label: label,
                  list: [name],
                });
              }
            });

            // 3. 查看 result
            console.log(result);
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
